<template>
    <div class="photoInfo-container">
        <!-- 大标题 -->
        <h1 class="title">{{photoInfo.title}}</h1>

        <!-- 小标题 -->
        <p class="subtitle">
            <span>发表时间:{{photoInfo.add_time | dateFormat}}</span>
            <span>点击: {{photoInfo.click}}次</span>
        </p>

        <!-- 缩略图区域 -->
        <div :class="{photoList: isActive}"><vue-preview :slides="photoList" @close="handleClose" class="aaa"></vue-preview></div>

        <!-- 内容区域 -->
        <div class="content" v-html="photoInfo.content"></div>

        <!-- 评论区域 -->
        <comment-box :id="id"></comment-box>
    </div>
</template>

<script>
    import Comment from "../subcom/Comment.vue";
    export default {
        name: "PhotoInfo",
        data() {
            return {
                id: this.$route.params.id,
                photoInfo: {},
                photoList: [],
                isActive: false,
            }
        },
        created() {
            this.getPhotoInfo();
            this.getPhotoList();
        },
        mounted() {
            this.isActive = !this.isActive;
        },
        components: {
            'comment-box': Comment
        },
        methods: {
            getPhotoInfo() {
                this.axios.get(`getimageInfo/${this.id}`)
                    .then(response => {
                        if (response.data.status === 0) {
                            this.photoInfo = response.data.message[0];
                        } else {
                            this.$toast('获取照片信息失败!')
                        }
                    })
            },
            getPhotoList() {
                this.axios.get(`getthumimages/${this.id}`)
                    .then(response => {
                        if (response.data.status === 0) {
                            response.data.message.forEach(item => {
                                item.w = 400;
                                item.h = 400;
                                item.msrc = item.src
                            });
                            this.photoList = response.data.message;
                        } else {
                            this.$toast('获取照片列表失败!')
                        }
                    })
            },
            handleClose () {
                console.log('close event')
            }
        }
    }
</script>

<style scoped>
    .photoInfo-container {
        padding: 0 4px;
    }
    .title {
        font-size: 30px;
        text-align: center;
        margin: 25px 0;
        color: #4a82d1;
    }
    .subtitle {
        font-size: 20px;
        color: darkgray;
        display: flex;
        justify-content: space-between;
    }
    .content >>> p {
        font-size: 30px;
        line-height: normal;
    }
    .content {
        font-size: 30px;
        line-height: initial;
        color: #8f8f94
    }
    .photoList {
        text-align: center;
    }
</style>